<template>
  <div>
    <!-- 城市筛选 -->
    城市:
    <el-select v-model="selectDto.city" placeholder="城市">
      <el-option
          v-for="item in cityOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      ></el-option>
    </el-select>

    <!-- 薪资下界筛选 -->
    薪资下界:
    <el-select v-model="selectDto.salaryL" placeholder="薪资下界">
      <el-option
          v-for="item in salaryLOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      ></el-option>
    </el-select>

    <!-- 薪资上界筛选 -->
    薪资上界:
    <el-select v-model="selectDto.salaryR" placeholder="薪资上界">
      <el-option
          v-for="item in salaryLOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      ></el-option>
    </el-select>

    <!-- 学历筛选 -->
    学历:
    <el-select v-model="selectDto.degree" collapse-tags placeholder="学历">
      <el-option :label="''" :value="null"></el-option>
      <el-option
          v-for="item in degreeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      ></el-option>
    </el-select>

    <!-- 筛选按钮 -->
    <el-button @click="filter" style="margin-left: 20px;">筛选</el-button>

    <!-- 单独一行用于搜索框 -->
    <div style="margin-top: 20px;">
      查询:
      <el-input
          v-model="searchQuery"
          placeholder="请输入职位名称或公司名称进行搜索"
          style="width: 300px; margin-right: 20px;"
      />
      <el-button @click="searchJobs" type="success">搜索</el-button>
      <el-button @click="resetFilters" style="margin-left: 10px;" type="success">还原</el-button>
    </div>
  </div>

</template>

<script>
import axios from "axios";
import pubsub from "pubsub-js";

export default {
  data() {
    return {
      // 筛选条件
      selectDto: {
        categoryId: 0,
        city: "杭州",
        salaryL: 0,
        salaryR: 100,
        degree: '不限',
      },

      // 搜索查询内容
      searchQuery: '',

      // 薪资选项
      salaryLOptions: [
        { label: "0K", value: 0 },
        { label: "10K", value: 10 },
        { label: "20K", value: 20 },
        { label: "30K", value: 30 },
        { label: "50K", value: 50 },
        { label: "100K", value: 100 },
        { label: "200K", value: 200 },
      ],
      salaryROptions: [
        { label: "0K", value: 0 },
        { label: "10K", value: 10 },
        { label: "20K", value: 20 },
        { label: "30K", value: 30 },
        { label: "50K", value: 50 },
        { label: "100K", value: 100 },
        { label: "200K", value: 200 },
      ],

      // 城市选项
      cityOptions: [
        { label: "杭州", value: "杭州" },
        { label: "北京", value: "北京" },
        { label: "上海", value: "上海" },
      ],

      // 学历选项
      degreeOptions: [
        { label: "不限", value: "不限" },
        { label: "大专", value: "大专" },
        { label: "本科", value: "本科" },
        { label: "硕士", value: "硕士" },
        { label: "博士", value: "博士" },
      ],

      // 岗位分类选项
      categoryOptions: [
        { label: "技术类", value: "技术类" },
        { label: "管理类", value: "管理类" },
        { label: "运营类", value: "运营类" },
      ],

      // 岗位数据
      jobs: [],
      companies: [],
    };
  },
  methods: {
    resetFilters() {
      // 还原筛选条件
      this.selectDto = {
        categoryId: 0,
        city: "杭州",
        salaryL: 0,
        salaryR: 100,
        degree: '不限',
      };

      // 清空搜索框
      this.searchQuery = '';

      // 重新加载所有岗位数据
      this.filter();
    },
    // 筛选岗位
    filter() {
      const path = `categoryId=${this.selectDto.categoryId}&city=${this.selectDto.city}&salaryL=${this.selectDto.salaryL}&salaryR=${this.selectDto.salaryR}&degree=${this.selectDto.degree}`;

      axios.get(`/api/jobs/select?${path}`)
          .then((result) => {
            if (result.data.code === 0) {
              this.jobs = result.data.data;
              this.jobs.forEach(job => {
                job.company_name = this.companies[job.companyId - 1]?.name || "未知公司";
              });
              pubsub.publish("jobs", this.jobs);
            } else {
              console.error("筛选失败:", result.data.message);
            }
          })
          .catch((error) => {
            console.error("请求错误:", error);
          });
    },

    // 模糊查询岗位
    searchJobs() {
      const query = this.searchQuery.trim().toLowerCase();

      if (!query) {
        // 如果搜索框为空，恢复所有岗位
        this.filter();
      } else {
        // 进行模糊搜索
        const filteredJobs = this.jobs.filter(job => {
          return job.title.includes(query) ||
              job.company_name.toLowerCase().includes(query);
        });
        // 发布筛选后的岗位
        pubsub.publish("jobs", filteredJobs);
      }
    },

    // 获取公司名称
    fetchCompanyName(companyId, job) {
      axios.get(`http://localhost:8080/company/findCompany/${companyId}`)
          .then(response => {
            job.company_name = response.data.name;
          })
          .catch(error => {
            console.error("Failed to fetch company:", error);
          });
    },
  },

  mounted() {
    // 获取所有公司信息
    axios.get("http://localhost:8080/company/getAllCompany")
        .then(res => {
          this.companies = res.data;
        })
        .catch(error => {
          console.error(error);
        });
    // 页面加载时进行初次筛选
    this.filter();
  },
};
</script>

<style scoped>
/* 样式可根据需要调整 */
</style>
